import React from "react";
import { View, Image, Text, Video } from "@tarojs/components";
import DBScrollView from "../../components/scroll-view";
import { AppDispatch, RootState } from "@src/store";
import { getMediaList } from "@src/store/mediasList";
import AniSlideUp from "@src/components/ani-slide-up";
import Taro from "@tarojs/taro";
import { getAblumCategories } from "@src/store/ablumCategories";
import MediaItem from "./mediaItem";
import { previewImages } from "@src/utils/previewImages";
import { connect } from "react-redux";
import { SCREEN_HEIGHT, SCREEN_WIDTH } from "@src/utils/constant";
import MediaNavBar from "@src/components/media-nav-bar";


import "./index.scss";
import PageScreen from "@src/components/layout/PageScreen";
import { previewVideo } from "@src/utils/previewVideo";
import { MediaFile } from "@src/store/globalData";

type Props = {
    dispatch: AppDispatch,
    mediaList: any,
    ablumnCategories: any,
    imageChoosed?:MediaFile[]
}

@(connect(({ globalData }) => {
    return { imageChoosed: globalData.imageChoosed };
}) as any)
class MediaGallery extends React.Component<Props>{

    state = {
        showFilter: false,
        ablumName: "全部"
    }


    componentDidMount() {
        try {
            this.reGetMediaList(this.state.ablumName);
            this.props.dispatch(getAblumCategories());

        } catch (error) {
            Taro.navigateBack();
        }
    }


    reGetMediaList(ablumName:string){
        this.props.dispatch(getMediaList({
            assetType: "All",
            groupName: ablumName == "全部" ? "" : ablumName,
            reset:true
        }));
    }



    handleClickNext() {
        Taro.navigateTo({
            url: "/pages/mediaPreview/index"
        });
    }

    render() {
        const { images, hasNextPage, loading } = this.props.mediaList;
        const containerPadding = 4;
        const columnNums = 4;
        const w = (SCREEN_WIDTH - containerPadding * 2) / columnNums;
        const imageChoosed = this.props.imageChoosed || [];

        return (<PageScreen style={{ backgroundColor: "black", height: "100%" }}>
            <MediaNavBar next={this.handleClickNext} canNext={imageChoosed.length > 0}>
                <Text onClick={() => {
                    this.setState({ showFilter: !this.state.showFilter });
                }}
                >
                    {this.state.ablumName}
                </Text>
            </MediaNavBar>

         
            <DBScrollView data={[{ takePhoto: true, node: { image: { url: "takePhoto" } } }, ...images]} getItemLayout={(data, index) => ({ length: w, offset: w * index, index })} keyExtractor={(item) => item.node.image.uri} numColumns={4} style={{ width: "100%", padding: containerPadding, maxHeight: SCREEN_HEIGHT - 44 - 27 }}
              onEndReached={() => {
                    if (hasNextPage && !loading) {
                        this.props.dispatch(getMediaList({
                            assetType: "All",
                            groupName: this.state.ablumName == "全部" ? "" : this.state.ablumName
                        }));
                    }
                }}
              onEndReachedThreshold={1}
              renderItem={({ item }) => {
                    let choosed = imageChoosed.findIndex(media=>media.uri === item.node.image.uri) >= 0;
                    let canChoosed = true;
                    if(imageChoosed.length){
                        switch (imageChoosed[0].type) {
                            case "video":
                                canChoosed = false;
                                break;
                            case "image":
                                if(item.node.image.playableDuration){
                                    canChoosed = false;
                                }
                                break;
                            default:
                                break;
                        }
                    }

                    return (
                        <MediaItem choosed={choosed} canChoosed={canChoosed} item={item} itemStyle={{ w: w, h: w, padding: containerPadding }} onPreview={(isVideo) => {
                            if(isVideo){
                                previewVideo({
                                    src:item.node.image.uri,
                                });
                            }else{
                                previewImages({
                                    imageUrls: images.map(item => {
                                        return item.node.image.uri;
                                    }),
                                    current: item.node.image.uri
                                });
                            }
                            
                        }}
                        />
                    );
                }}
            />
            <AniSlideUp show={this.state.showFilter} duration={200}>
                <DBScrollView data={this.props.ablumnCategories} style={{ width: "100%", position: "absolute", top: 44, bottom: 0 }} renderItem={({ item }) => <View className="galleryItem__filter__item" key={item.title} onClick={() => {
                    this.setState({
                        showFilter: false,
                        ablumName: item.title
                    });
                    this.reGetMediaList(item.title);
                }}
                >
                    <Image src={item.coverUrl} className="galleryItem__filter__item__coverUrl" mode="aspectFill" />
                    {item.title}({item.count})

                    
                </View>}
                />
            </AniSlideUp>

        </PageScreen>);
    }
}


export default connect((state: RootState) => {
    return {
        mediaList: state.mediaList,
        ablumnCategories: state.ablumnCategories.ablumnCategories
    };
})(MediaGallery);